import React, { useEffect, useRef } from 'react'
import EZUIKit from 'ezuikit-js'

const EzPlayer = ({
  url = '',
  accessToken = '',
  width = 600,
  height = 450,
}) => {
  const containerRef = useRef(null)
  const playerRef = useRef(null)

  useEffect(() => {
    if (!containerRef.current) return

    playerRef.current = new EZUIKit.EZUIKitPlayer({
      id: containerRef.current.id,
      accessToken,
      url,
      width,
      height,
      handleError: (err) => {
        console.error('播放器错误:', err)
      },
    })

    return () => {
      if (playerRef.current) {
        playerRef.current.stop()
      }
    }
  }, [url, accessToken])

  return <div id="ezuikit-container" ref={containerRef} />
}

export default EzPlayer
